<template>
  <div class="system-permission-list">
    <h3>权限管理</h3>
    <div class="input_box">
      <el-button class="addAll" size="small" icon="el-icon-circle-plus" @click="add">添加权限</el-button>
    </div>
    <div class="table">
      <el-table :indent="16"
                :data="tableData"
                style="width: 100%;margin-bottom: 20px;
                text-align: center;"
                :row-key="rowKey"
                border
                :default-expand-all="false"
                :tree-props="{children: 'childrenPermission', hasChildren: 'hasChildren'}">
        <el-table-column label="权限名称" min-width="100" align="left">
          <template v-slot="scope">
            <span>{{ scope.row.menuName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="等级" min-width="50"></el-table-column>
        <el-table-column label="权限序号" min-width="30">
          <template v-slot="scope">
            <span>{{ scope.row.serialNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限关键字" min-width="100">
          <template v-slot="scope">
            <span>{{ scope.row.permission }}</span>
          </template>
        </el-table-column>
        <el-table-column label="路由" min-width="120">
          <template v-slot="scope">
            <span>{{ scope.row.route }}</span>
          </template>
        </el-table-column>
        <el-table-column label="是否显示菜单" min-width="50">
          <template v-slot="scope">
            <el-switch
              @change="menuSwitchChange(scope.row)"
              v-model="scope.row.menuOpend"
              :active-value="1"
              :inactive-value="0"
              active-color="#ffb87e"
              inactive-color="#e1e1e1"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="图标" min-width="50">
          <template v-slot="scope">
            <svg-icon :icon-class="scope.row.icon"
                      style="font-size:20px;vertical-align: middle"
                      v-if="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="150" fixed="right">
          <template v-slot="scope">
            <el-button @click="handleEdit(scope.row)" type="warning" size="mini" plain>编辑</el-button>
            <el-button @click="handleDelete(scope.row.id)" size="mini" style="background-color:#ea7c5a;color:#fff">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    this.getList();
  },
  data() {
    return {
      tableData: [],
      page_option: {
        current_page: 1,
        page_size: 15,
        total: 0
      }
    };
  },
  computed: {
    tableSize() {
      return this.$store.getters.tableSize;
    }
  },
  methods: {
    rowKey(row) {
      return "id" + row.id;
    },
    getList() {
      this.$api.system.getMenuList({})
        .then((res) => {
          console.log(res.data);
          this.tableData = res.data;
        });
    },
    handleEdit(row) {
      let arr = JSON.parse(JSON.stringify(row));
      if (arr.childrenPermission) {
        delete arr.childrenPermission;
      }
      console.log(arr);
      sessionStorage.setItem("permissionEdit", JSON.stringify(arr));
      this.$router.push("/system/permission/edit");
    },
    handleDelete(id) {
      let that = this;
      this.$confirm("是否确认删除本条权限?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        that.$api.system.menuDelete({ id })
          .then((res) => {
            if (res.code === 200) {
              this.$message.success("删除成功！");
              this.getList();
            }
          });
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });

    },
    // 更改菜单状态
    menuSwitchChange(row) {
      let option = {
        id: row.id, // 自身id
        permission: row.permission, //权限关键字
        menuName: row.menuName, //菜单名称
        route: row.route, //路由地址
        icon: row.icon, //图标地址
        parent: row.parentId, //父级id  1级菜单父级为0
        serialNumber: row.serialNumber, //序号
        grade: row.grade, //权限等级 1/2/3 一级/二级/三级
        menuOpend: row.menuOpend //是否开启菜单 1/0 开启/关闭
      };
      this.$api.system.menuUpdate(option)
        .then((res) => {
          if (res.code === 200) {
            console.log(res);
            this.$message.success("修改成功");
            this.getList();
          }
        })
        .catch(err => {
          this.$message.error("修改失败");
        });
    },
    add() {
      this.$router.push("/system/permission/add");
    }
  }
};
</script>
<style scoped>
@import url('./list.css');
</style>
